<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>我是第一个li</li>
</ul>

<script>
    // 1.创建节点(元素节点)
    var li = document.createElement('li');
    li.innerHTML = '<a>我是使用 li.innerHTML 创建出来的a标签</a>'
    var ul = document.querySelector('ul');

    // 2. 添加节点 node.appendChild(child)  node父级, child是子级
    // node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾.
    // 类似CSS的 after
    ul.appendChild(li)

    // 3. 添加节点 node.insertBefore(child, 指定元素);
    // insertBefore<T extends Node>(newChild: T, refChild: Node | null): T;
    var li02 = document.createElement('li');
    li02.innerHTML = '<a>我是 li02</a>'
    ul.insertBefore(li02, ul.children[0]);

    // 4.我们想要页面添加一个新的元素: 1.创建元素  2.添加元素
</script>
</body>
</html>
